<?php include("includes/session.php"); ?>
<?php include("includes/connect_db.php"); ?>
<?php include("includes/header.php"); ?>
<?php include("notif.php"); ?>

<style>
	.table{
		border: 1px solid #DDD;
		font-family: 'SEGOE UI';
	}
	.tr-header{
		background-color: #0088cc; 
		color: #FFF;
	}
	.btnGrup{
		width: 150px;
	}
	.tambahGrup{
		margin-bottom: 10px;
		padding-bottom: 10px;
		border-bottom: solid 1px #08c;
		width: 100%;
	}
	.grup{
		border: 1px solid #08c;
		background: #08c;
		padding-left: 10px;
		color: #fff;
	}
	.isiGroup{
		margin-top: 5px;
		border: solid 1px #08c;
		padding: 5px;
		color: #08c;
	}
	.hapusGroup, .edit{
		cursor: pointer;
	}
	.view{
		margin-left: 5px;
	}
	.check{
		cursor: pointer;
	}
</style>

<script type="text/javascript">
	/* Table initialisation */
	$(document).ready(function() {
		$('#example').dataTable( {
			"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
			"sPaginationType": "bootstrap",
			"aoColumns": [
				{ "sClass": "center", "bSearchable": false, "bSortable": false },
				{ "sClass": "left", "bSearchable": true, "bSortable": true},
				{ "sClass": "left", "bSearchable": true, "bSortable": true}
			],
			"oLanguage": {
				"sLengthMenu": "_MENU_ records per page"
			}
		} )	
	} );
</script>

<div class="span9">  
    <h3>SMS</h3>                      
    <ul class="breadcrumb well">
        <li class="active">Contact</li>                
    </ul>    
    
	<div>
		<ul class="nav nav-tabs" id="myTab">
			<li class="active"><a href="#kontak">Kontak</a></li>
			<li><a href="#group">Group</a></li>
		</ul>
	</div>
	 
	<div class="tab-content">
		<div class="tab-pane active" id="kontak">
			<div>
			    <table class="table" id="example">
			        <thead>
			            <tr class="tr-header">
			                <th width="2%">
			                    <input class="check-real-all" type="checkbox" style="display: none">
			                    <i class="icon-check check-all" style="opacity:0.2"></i>
			                </th>
			                <th style="padding-left: 20px;">
			                	Kontak
			                </th>
			                <th>
			                	Tipe
			                </th>
			            </tr> 
			        </thead>
			        <tbody>            
					
					<?php
			            $sql_lihat_kontak = "SELECT * 
			            					FROM (
			         --    						SELECT 
			         --    							a.nim AS id, 
			         --    							a.nama AS nama, 
			         --    							a.telepon AS telepon, 
			         --    							a.email AS email, 
			         --    							'Mahasiswa' AS tipe
												-- FROM 
												-- 	f_tb_mhs a 
												-- UNION
												-- SELECT 
												-- 	b.nip_baru AS id, 
												-- 	b.nama_lengkap AS nama, 
												-- 	b.telp AS telepon, 
												-- 	b.email AS email, 
												-- 	'Dosen Pegawai' AS tipe
												-- FROM 
												-- 	f_tb_master_pegawai b
												-- UNION
												SELECT 
													c.id_kontak AS id,
													c.nama_kontak AS nama,
													'tes' AS telepon,
													c.email AS email,
													'Kontak' AS tipe
												FROM
													tb_kontak c)
											AS 
												tb_kontak_gabung 
											WHERE 
												telepon <> '' AND 
												telepon NOT LIKE '%/%' AND 
												telepon NOT LIKE '%-%' AND 
												telepon NOT LIKE '%,%' AND 
												telepon NOT LIKE '% %' AND 
												telepon NOT LIKE '%(%' AND 
												telepon NOT LIKE '%.%' AND 
												telepon NOT REGEXP '[abc]'
											ORDER BY nama ASC";
						$query_lihat_kontak = mysql_query($sql_lihat_kontak);
			            
			            while($lihat_kontak = mysql_fetch_array($query_lihat_kontak)){
			            	echo "<tr class='select_contact'>";
			        ?>
			        
				        	<td>
				                <input class="id-kontak" type="hidden" value="<?php echo $lihat_kontak['id'];?>" />
				                <input class="tipe" type="hidden" value="<?php echo $lihat_kontak['tipe'];?>" />
				                <input class="check-real" type="checkbox" style="display:none">
				                <i class="icon-check check" style="opacity:0.2"></i>
							</td>
				            <td class="view-kontak" style="cursor: pointer; padding-left: 20px;">
								<img style="height: 30px;" src="<?php echo cekGambar($lihat_kontak['id'], 1, 3); ?>">
								<span>
									<?php echo $lihat_kontak['nama'];?>
								</span>
				         		
				         		<span style="color: #0088cc">
									<?php 
										if(is_null($lihat_kontak['email'])){
											echo "";
										} elseif ($lihat_kontak['email'] == '') {
											echo "";
										} else{
											echo "( ".$lihat_kontak['email']." )";
										}
									?>
								</span>
							</td>
							<td>
								<?php echo $lihat_kontak['tipe'];?>
							</td>
						</tr>
				<?php     
			            }
				?>
			    	</tbody>
				</table>
			</div>

			<div class="pull-left" style="margin: -20px 0px 0px 0px">
		    	<div class="input-prepend">
					<span class="add-on"><i class="icon-trash" style="opacity: 0.7;"></i></span>
					<button class="btn btn-danger but-del" type="button" disabled="disabled">Hapus</button>
					<span class="add-on"><i class="icon-plus" style="opacity: 0.7;"></i></span>
					<button class="btn btn-primary but-add" type="button">Tambah</button>
				</div>
		    </div>
		</div>

		<div class="tab-pane" id="group">
			<div class="tambahGrup">
				<button class="btn btn-info btnGrup" onClick="location.href='kontakGrup-tambah.php'">
					<i class="icon-white icon-plus"></i>
					Buat Group
				</button>
			</div>
			<div class="grup">
				<h4>
					Group Kontak
				</h4>
			</div>
			<?php
				$sql_group = "SELECT * FROM tb_group_kontak";
				$query_group = mysql_query($sql_group);

				while ($group = mysql_fetch_array($query_group)) {
					$sql_detail = "SELECT * FROM tb_detail_kontak WHERE id_group = '$group[id_group]'";
					$query_detail = mysql_query($sql_detail);
					$jumlah = mysql_num_rows($query_detail);
			?>

			<div class="isiGroup">
				<span class="view">
					<input type="hidden" class="idGroup" value="<?php echo $group['id_group']?>">
					<i class="icon-remove hapusGroup"></i>
				</span>
				<span class="view">
					<img style="width: 30px; height: 30px;" src="img/group-icon.png">
				</span>
				<span class="view edit">
					<?php echo $group['nama_group']." (".$jumlah." Anggota)"; ?>
				</span>
			</div>

			<?php
				}
			?>
		</div>
	</div>
</div>

<?php include("includes/footer.php"); ?>

<script type="text/javascript">
	var cek = 0;
	var tempView = '';

    $('document').ready(function(){
		$('#myTab a').click(function (e) {
			e.preventDefault();
			$(this).tab('show');
		})
    
		$('.check').live('click',function(){
			if($(this).parent('td').find('.check-real').is(':checked')){
				cek--;
				$(this).parent('td').find('.check-real').removeAttr('checked');
				$(this).css('opacity','0.2');
				$(this).parent('td').parent('tr').removeClass('info');
				$(this).parent('td').parent('tr').css('color','');
			}else{
				cek++;
				$(this).parent('td').find('.check-real').attr('checked','checked');
				$(this).css('opacity','1');
				$(this).parent('td').parent('tr').addClass('info');
				$(this).parent('td').parent('tr').css('color','');
			}
			
			if(cek > 0){
				$('.but-del').removeAttr('disabled');
				$('.but-read').removeAttr('disabled');
			} else{
				$('.but-del').attr('disabled','disabled');
				$('.but-read').attr('disabled','disabled');
			}
			
			if(cek==$('.check').length){
				$('.check-all').css('opacity','1');
				$('.check-real-all').attr('checked','checked');
			} else{
				$('.check-all').css('opacity','0.2');
				$('.check-real-all').removeAttr('checked');
			}
		});
		
		$('.check-all').click(function(){
			var cekCentang = $(this).parent('th').find('.check-real-all');
			//alert(cekCentang);
			if(cekCentang.is(':checked')){
				$('.check').each(function(){
					var temp = $(this);
					if($(this).parent('td').find('.check-real').is(':checked')){	
						temp.click();
					}
				});
				cekCentang.removeAttr('checked');
				$(this).css('opacity','0.2');
			}else{
				$('.check').each(function(){
					var temp = $(this);
					if(!$(this).parent('td').find('.check-real').is(':checked')){	
						temp.click();
					}
				});
				cekCentang.attr('checked','checked');
				$(this).css('opacity','1');
			}
		});
			
		$('.check-all').live({
			mouseenter:
			   function()
			   {
					$(this).css('opacity','1');
			   },
			mouseleave:
			   function()
			   {
					if(!$(this).parent('th').find('.check-real-all').is(':checked')){
						$(this).css('opacity','0.2');
					}		
			   }
		   }
		);

		
		$('.check').live({
			mouseenter:
			   function()
			   {
					$(this).css('opacity','1');
			   },
			mouseleave:
			   function()
			   {
					if(!$(this).parent('td').find('.check-real').is(':checked')){
						$(this).css('opacity','0.2');
					}		
			   }
		   }
		);

		$('.view-kontak').live('click',function(){
			tempView = $(this);
            $("#tampil-modal").fadeOut("medium",function(){
                var form_kontak = {
                    id_kontak: tempView.parent('tr').find('.id-kontak').val(),
                    tipe: tempView.parent('tr').find('.tipe').val()
                };
                $.ajax({ 
                    type: "POST",
                    url: "kontak-modal.php",
                    data: form_kontak, 
                    cache: false, 
                    success: function(kontak){ 
                        $("#tampil-modal").html(kontak);
                        $("#tampil-modal").fadeIn("medium");
                    } 
                }); 
            });
            return false;
		});
		
		$('.but-del').click(function(){
			$("input:checkbox").each(function(){
				if($(this).is(':checked')){												
					var form_kontak = {
						id_kontak: $(this).parent('td').find('.id-kontak').val()
					};
					$.ajax({
						type: "POST",
						url: "act_kontak.php?aksi=1", 
						data: form_kontak, 
						cache: false, 
						success: function(kontak){
							
						} 
					});
					//alert($(this).parent('td').find('.id-kontak').val());
				} 
			});
			alert('DATA BERHASIL DIHAPUS');
			location.reload(); 
		});

		$('.but-add').click(function(){
			console.log("kontak");
            $.ajax({ 
                type: "POST",
                url: "kontak-tambah-modal.php",
                cache: false, 
                success: function(msg){ 
                    $("#tampil-modal").html(msg);
                    $("#tampil-modal").fadeIn("medium");
                } 
            }); 
            return false;
		});

		$('.hapusGroup').live('click', function(){
			var dataGroup = {
				id : $(this).parent('span').find('.idGroup').val()
			};

			$.ajax({
			  url: 'act_contact_group.php?act=3',
			  type: 'POST',
			  data: dataGroup,
			  success: function(data, textStatus, xhr) {
			  }
			});
		    $(this).closest('div').remove();
		});

		$('.edit').live('click', function(){
			var temp = $(this).closest('div').find('.idGroup').val();
			window.location = "kontakGrup-edit.php?id="+temp;
		});
	});
</script>